<template>
  <div class="cash">
    <div class="tabs-box">
      <div class="tabs" @click="goCashMode">

        <div v-show="alipayShow">
          <img
            src="../../assets/images/102.png"
            alt=""
          >
          <span>支付宝提现</span>
        </div>
        <div v-show="weixinShow">
          <img
            src="../../assets/images/103.png"
            alt=""
          >
          <span>微信提现</span>
        </div>
        <div v-show="chooseShow">
          <img
            src="../../assets/images/500.png"
            alt=""
          >
          <span>添加提现账户</span>
        </div>


        <div><i class="icon iconfont icon-xiangyou"></i></div>
      </div>

      <div class="amounts">
        <div class="content">
          <span class="title">提现金额</span><br/>
          <span class="icon">￥</span>
          <input type="number" placeholder="" @focus="withdraw" v-model="submitData.money" >
         <hr>
          <span class="tips">可用余额 {{parseFloat(balance).toFixed(2)}}元</span>
        </div>  
      </div>

    <div class="submit">
      <button v-show="wait">预计两小时到账，确认提现</button>
      <button v-show="wait2" style="background-color: green;opacity:0.7" @click="doWithDraw">预计两小时到账，确认提现</button>
    </div>

    </div> 
  </div>
</template>
<script>
import myHeader from "../header/index.vue";
import { getUserInfo,addUserWithdraw } from "../../api/user";
import { Toast } from 'vant';
export default {

  data() {
    return {
      balance:0.00,

      wait:true,
      wait2:false,
      submitData: {
        "type":0,//require|in:1,2,3   1支付宝2银行卡3微信
        "money":'',//require|float    充值金额
      },
      ifAlipay:0,
      ifWechat:0,
      alipayShow:false,
      weixinShow:false,
      chooseShow:false,
      choose:'',
    };
  },
  methods: {
    withdraw(){
      this.wait = false
      this.wait2 = true
    },
    goCashMode() {
      this.$router.push({
        path: "/cashMode"
      });
    },
    getUserAccount(){

        getUserInfo().then(res => {
          this.balance = res.data.info.money;
          this.ifAlipay = res.data.info.alipay
          this.ifWechat = res.data.info.wechat

          if(this.choose =="" || this.choose==undefined ){
            if(this.ifAlipay==1){
              this.alipayShow = true
              this.submitData.type = 1
            }else{
              if(this.ifWechat==1){
                this.weixinShow = true
                this.submitData.type = 3
              }else{
                this.chooseShow = true
              }
            }
          }else{
            if(this.choose=="alipay"){
              this.alipayShow = true
              this.submitData.type = 1
            }else if(this.choose=="weixin"){
              this.weixinShow = true
              this.submitData.type = 3
            }
          }

        });
    },
    doWithDraw(){
      console.log(this.submitData)
      if(parseFloat(this.submitData.money) > parseFloat(this.balance) ){
        Toast("抱歉，您的账户余额不足");
        return;
      }

      addUserWithdraw(this.submitData).then(res => {
        Toast(res.message);
        if (res.status == 200) {
          setTimeout(() => {
            this.$router.push({
              path: "/financial"
            });
          }, 1000);
        }
      });
    }
  },
  created(){
    this.choose = this.$route.query.choose
    this.getUserAccount();
  }
};
</script>

<style lang="scss">
.cash {
  width: 100%;
  overflow-x: hidden;
  // height: 100%;
  background-color: #f5f5f5;
  padding-bottom: 48px;
  .banner{
    width: 100%;
    height: 180px;
    background-image: linear-gradient(160deg, #fd2039 20%,#f79971 80%);
    position: relative;
    left: 0;
    background-color: #f5f5f5;
    top: 0;
    color:#FFF; 
    font-size:14px;
    font-weight:300;
    .detailed{
      float:right;
      padding: 15px 15px; 
    }
    .info{ 
       padding: 55px 15px; 
      .amount{ 
        font-size:50px;
        font-weight:400;
      }
    }
  }
  .tabs-box {
    width: 100%;
    margin-top: 10px;
    .tabs {
      margin-bottom: 10px;
      width: 100%;
      height: 48px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      img {
        vertical-align: middle;
        width: 20px;
      }
      span {
        vertical-align: middle;
        padding-left: 10px;
        font-size: 14px;
      }
    }
    .amounts {
      margin-bottom: 10px;
      width: 100%;
      height: 138px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      img {
        vertical-align: middle;
        width: 20px;
      }
      span {
        vertical-align: middle;
        padding-left: 10px;
        font-size: 14px;
      }
      .content{
          width:100%;
          height:100px;
          float:flex;
      }
      .title{
          color:#888;
          font-size:14px;  
      }
       .tips{
          color:#888;
          font-size:12px;  
      }
      .icon{
          font-size:32px;  
          width:15%;
          float:left; 
      }
      input{
          font-size:32px;  
          width:85%;
          float:left;   
          border:none;
      } 
          hr { 
            width:94%;
            margin:0 auto; 
            border: 0;
            height: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
            }
    }
       .submit {
        width: 100%;
        text-align: center;
        padding: 20px 0; 
        button {
            width: 90%;
            height: 40px;
            outline: none;
            border: none;
            background-color: #e71434;
            font-size: 14px;
            color: #fff;
            border-radius: 5px;
            opacity:0.2;
        }
    }
  }
}
</style>


